<!DOCTYPE html>
<html style="font-size=100px">
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<meta name="viewport" content="" id="vp">
		<title></title>
		<script>
			var scale=1/window.devicePixelRatio;

			var mstr='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';

			document.getElementById('vp').content=mstr;

		</script>
		<script>
			var html = document.querySelector("html");

			html.style.fontSize = html.offsetWidth/6.4 + "px";
			addEventListener("resize",function(){


				html.style.fontSize = html.offsetWidth/6.4 + "px";
			},false);
		</script>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			var  jq= $.noConflict();
		</script>
		<script src="js/zepto.js"></script>
		<script src="js/event.js"></script>
		<script src="js/touch.js"></script>
		<link rel="stylesheet" href="css/public.css"/>
		<link rel="stylesheet" href="fonts/iconfont.css"/>
	</head>
	<body>
	<div class="wrapper">
		<header class="header">
			<div class="hl iconfont"></div>
			<div class="hr">
				<ul>
					<li class="active">热点</li>
					<li>关注</li>
				</ul>
				<div class="found">发现</div>
				<div class="xin">个人中心</div>
			</div>
		</header>
		<section class="center">
			<!--wang -->
			<div class="center_box"  style="display:block;">
				<div class="bt">
					<ul class="bt_ul_1">
						<li class="lia">足球现场</li>
						<li>足球生活</li>
						<li>足球美女</li>
					</ul>
				</div>
				<div class="ct">	
					<ul>
						<li><img src="img/wz.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/2.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
						<li><img src="img/3.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/4.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
						<li><img src="img/3.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/4.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
						<li><img src="img/3.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/4.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
					</ul>				
				</div>
			<div class="sh"  style="display:none">
					<ul class="sleft">
						<li>
							<img src="img/6.jpg" alt="">
							<p>就开始对符合对费</p>
						</li>
						<li>
							<img src="img/6.jpg" alt="">
							<p>就开始对符合对费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
					</ul>
					<ul class="sright">
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>
						<li>
							<img src="img/7.jpg" alt="">
							<p>就开始对符第三方公司的符合对方水电费</p>
						</li>


					</ul>
				</div>
				<div class="ct et" style="display:none">	
					<ul>
						<li><img src="img/wz.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/2.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
						<li><img src="img/3.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/4.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
						<li><img src="img/3.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/4.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
						<li><img src="img/3.jpg" alt=""><p>小丸子啊小丸子！</p></li>
						<li><img src="img/4.jpg" alt=""><p>萌萌哒小丸子啊萌萌...</p></li>
					</ul>				
				</div>	
			</div>
			<!--gao-->
			<section class="grzx"  style="display: none;">
				<div class="gt">
					<figure>
						<img src="img/gr1.jpg" alt=""/>
						<figcaption>
							<h3>我叫小萌</h3>
							<h4>我是小萌我谁！哈哈哈哈！！</h4>
						</figcaption>
					</figure>
				</div>
				<div class="gc">
					<ul class="gc_ul">
						<li class="active">照片（1）</li>
						<li>关注（3）</li>
						<li>粉丝（8）</li>
					</ul>
					<div class="gc_box">
						<ul class="gc_ull_1">
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
						</ul>
						<ul class="gc_ull_2">
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
						</ul>
						<ul class="gc_ull_3">
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
							<li><img src="img/gr2.jpg" alt=""/></li>
						</ul>
					</div>


				</div>
			</section>
			<!--gao-->
			<section class="clip" style="display:none ">
				<canvas  id="cv"></canvas>
				<div class="true">
					<div class="true_l">确定裁剪</div>
					<div class="true_r">放弃重来</div>
				</div>
				<canvas id="cb"></canvas>
				<div class="btn"><span>提</span>交</div>
			</section >
			<div class="search" style="display: none;">
				<div class="se_sou">
					<input id="se_is" type="search" placeholder="请输入昵称" value="">
					<a href="javascript:;" >搜索</a>
				</div>
					<table cellpadding='2' cellspacing='0'>
						<tbody>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						<tr><td></td></tr>
						</tbody>
					</table>
				<div class="kuaisu">点击选项快速搜索</div>

			</div>
			<section class="guanzhu" style="display:none;">
				<div class="gz_box">
					<div class="gz_t">
						<figure>
							<img src="img/gr1.jpg" alt=""/>

								<figcaption>
									<h5>
										<span>我叫小萌</span>
										<span class="iconfont">3259879</span>
									</h5>
									<h6>我是小萌我怕谁！哈哈！</h6>
								</figcaption>


						</figure>
					</div>
					<div class="gz_c">
						<img src="img/gz1.jpg" alt=""/>
					</div>
					<div class="gz_b">
						<p>小丸子啊小丸子!</p>
					</div>

				</div>
				<div class="gz_box">
					<div class="gz_t">
						<figure>
							<img src="img/gr1.jpg" alt=""/>

							<figcaption>
								<h5>
									<span>我叫小萌</span>
									<span class="iconfont">3259879</span>
								</h5>
								<h6>我是小萌我怕谁！哈哈！</h6>
							</figcaption>


						</figure>
					</div>
					<div class="gz_c">
						<img src="img/gz1.jpg" alt=""/>
					</div>
					<div class="gz_b">
						<p>小丸子啊小丸子!</p>
					</div>

				</div>
				<div class="gz_box">
					<div class="gz_t">
						<figure>
							<img src="img/gr1.jpg" alt=""/>

							<figcaption>
								<h5>
									<span>我叫小萌</span>
									<span class="iconfont">3259879</span>
								</h5>
								<h6>我是小萌我怕谁！哈哈！</h6>
							</figcaption>


						</figure>
					</div>
					<div class="gz_c">
						<img src="img/gz1.jpg" alt=""/>
					</div>
					<div class="gz_b">
						<p>小丸子啊小丸子!</p>
					</div>

				</div>
			</section>
			<!--yyz-->
			<div class="result" style="display: none;">
				<div class="sou">
					<input id="is" type="search" value="请输入昵称">
					<a href="javascript:;" >搜索</a>
				</div>
				<div class="guan">
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					<div class="gz">
						<div class="gn">
							<h2>我叫小萌</h2>
							<a href="javascript:;" >关注</a>
						</div>
						<p class="word">sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfghjdrtjhnrswefislejfgolsrijgvlsajg;oaisrgjolsdrjig我是小萌我怕谁。哈哈哈</p>
						
					</div>
					
				</div>
			</div>
		</section>
		<footer class="footer">
			<ul>
				<li class="iconfont"><span>首页</span></li>
				<li class="iconfont"><span>发现</span></li>
				<li><span class="iconfont xj"></span></li>
				<li class="iconfont"><span>我的</span></li>
				<li class="iconfont"><span>退出</span></li>
			</ul>
		</footer>
		<div class="cbl">
			<p class="tx"><img src="img/5y.jpg" alt=""></p>
			<p class="p1">萌萌哒小妖精</p>
			<p class="p2">这家伙很懒，什么也没留下...</p>
			<ul>
				<li>足球现场</li>
				<li>足球生活</li>
				<li>足球美女</li>
			</ul>
		</div>
		<!--load-->
		<div class="rmask r1" style="display: none;">
				<div class="load" >
					<h3>登录<i class="iconfont times">&#xe602;</i></h3>
					<div class="info">
						<div id="item"><input type="tel" id="dtel" placeholder="手机号"/>	<i class="iconfont tip">&#xe608;</i>	</div>
						<div id="item"><input type="password" id="dpsd" placeholder="密码"/><i class="iconfont tip">&#xe608;</i>	</div>	
						<p>还没有账号？点击此处立即<mark id="rzc">注册</mark></p>
						<a href="JavaScript:;" id="sub">提&nbsp;交</a>
					</div>
				</div>
			</div>
			
		<!--register-->
		<div class="rmask r2" style="display: none;">
				<div class="register">
					<h3><span id="cancel">取消</span><i id="ensure">确定</i></h3>
					<div class="info">
						<div id="item"><input type="tel" id="tel" placeholder="手机号"/><i class="iconfont tip">&#xe608;</i>	</div>
						<div id="item"><input type="password" id="psd" placeholder="密码"/><i class="iconfont tip">&#xe608;</i></div>
						<div id="item"><input type="text" id="name" placeholder="昵称"/><i class="iconfont tip">&#xe608;</i></div>	
					</div>
				</div>
			</div>	
	</div>
	</body>

	<script src="js/search.js"></script>
	<script src="js/clip.js"></script>
	<script src="js/shou.js"></script>
	<script src="js/load.js"></script>
	<script>
		$('.gc_box ul').eq(1).hide();
		$('.gc_box ul').eq(2).hide();
		$('.gc_ul li').tap(function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.gc_box ul').eq($(this).index()).show().siblings().hide();
		});
		//点击切换左边栏
		$('.cbl').find('ul').find('li').on('tap',function(){
			$('.cbl').hide();
			$('.hr').find('ul').show().siblings().hide();
			$('.hr').find('ul li').eq(0).addClass('active').siblings().removeClass('active');
			$('.footer').find('ul li').eq(0).css('color','#0DC441').siblings().css('color','#D3D3D3');
			$('.center_box').show().siblings().hide();
			$('.center_box').show().find('div').eq($(this).index()+1).show().siblings().not('.bt').hide();
			$('.center_box .bt').find('.bt_ul_1').find('li').eq($(this).index()).addClass('lia').siblings().removeClass('lia');
		});
		//点击切换热点、关注
		$('.hr').find('ul li').eq(0).on('tap',function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.center').find('div').eq(0).show().siblings().hide();
		});
		$('.hr').find('ul li').eq(1).on('tap',function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.center').find('.guanzhu').show().siblings().hide();
		});
		//点击footer切换
		$('.footer').find('ul li').eq(0).on('tap',function(){
			$(this).css('color','#0DC441').siblings().css('color','#D3D3D3');
			$('.hr').find('ul li').eq(0).addClass('active').siblings().removeClass('active');
			$('.center_box').show().siblings().hide();
			$('.hr').find('ul').show().siblings().hide();

		});
		$('.footer').find('ul li').eq(1).on('tap',function(){
			$(this).css('color','#0DC441').siblings().css('color','#D3D3D3');
			$('.search').show().siblings().hide();
			$('.hr').find('.found').show().siblings().hide();
		});
		$('.footer').find('ul li').eq(3).on('tap',function(){
			$(this).css('color','#0DC441').siblings().css('color','#D3D3D3');
			$('.grzx').show().siblings().hide();
			$('.hr').find('.xin').show().siblings().hide();
		});
		//点击搜索
		$('.se_sou').find('a').on('tap',function(){
			if($('#se_is').val()==''){
				return;
			}else{
				$('.result').show().siblings().hide();
			}
		})
		//点击头像
		$('.grzx').find('.gt').find('figure').find('img').on('tap',function(){
			$('.clip').show().siblings().hide();
		})

	</script>
</html>
